<script setup lang="js">
import { reactive, ref } from "vue";

const refCount = ref({
  count1: 0
});
const reactiveCount = reactive({
  count2: 0
});

let { count1 } = refCount.value;
// 解构的变量建议用const（不可修改）或者let声明
// 不建议使用var声明，var变量会提升作用域至顶部
let { count2 } = reactiveCount;
// 解构之后，refCount.value.count1以及reactiveCount的值发生变化与解构的变量无关

function countUp1() {
  count1++
  // 对refCount不产生影响
  console.log('refCount', refCount.value.count1)
  console.log('count1', count1)
}

function countUp2() {
  count2++
  // 对reactiveCount不产生影响
  console.log('reactiveCount', reactiveCount.count2)
  console.log('count2', count2)
}
</script>

<template>
  <div class="q-pa-6">
    <q-banner class="bg-purple-4 text-white text-center mb-8">
      <p class="text-h4">陈一非 23211860123</p>
    </q-banner>

    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <h3 class="text-xl text-center font-bold mb-4">作业十</h3>
      <div class="row justify-center gap-4">
        <q-btn @click="countUp1" color="primary" rounded-full label="Count1" />
        <q-btn @click="countUp2" color="secondary" rounded-full label="Count2" />
        <q-btn @click="refCount.count1++" color="accent" rounded-full label="RefCount" />
        <q-btn @click="reactiveCount.count2++" color="positive" rounded-full label="ReactiveCount" />
      </div>
    </div>

    <q-card class="q-ma-auto" style="max-width: 500px;">
      <q-card-section>
        <p class="text-lg mb-2"><strong>refCount变量值：</strong>{{ refCount }}</p>
        <p class="text-lg mb-2"><strong>count1变量值：</strong>{{ count1 }}</p>
        <p class="text-lg mb-2"><strong>count2变量值：</strong>{{ count2 }}</p>
        <p class="text-lg"><strong>reactiveCount变量值：</strong>{{ reactiveCount }}</p>
      </q-card-section>
    </q-card>
  </div>
</template>

<style scoped>

</style>
